<template>
  <div>
    <el-table v-bind="$attrs" v-on="listeners">
      <slot></slot>
    </el-table>
    <el-pagination
      background
      hide-on-single-page
      layout="total,prev,pager,next,jumper"
      :total="total"
      :page-size="parseInt(pageSize)"
      @current-change="$emit('current-change',$event)"
    ></el-pagination>
  </div>
</template>
<script>
/**
 * 组件基于element中的table ，pagination封装，支持所有el-table属性方法
 *  props：currentPage=>当前页  total=>总数
 *  event: current-change=>传递当前页码
 */
export default {
  props: ["total", "pageSize"],
  computed: {
    listeners() {
      let obj = { ...this.$listeners };
      delete obj["current-change"];
      return obj;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/baseColor.scss";
/deep/ .el-table {
  td,
  th {
    text-align: center;
  }
}

//分页样式-开始
/deep/ .el-pagination {
  text-align: end;
  margin-top: 8px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: $mainColor;
  border-radius: 50%;
}

/deep/ .el-pagination.is-background .el-pager li:not(.active):hover {
  color: $mainColor;
}

/deep/ .el-pagination.is-background {
  .btn-prev,
  .btn-next,
  .el-pager li {
    border-radius: 50%;
  }
}
//分页样式-结束
// table 样式调整
/deep/ .el-table {
  td,
  th {
    // text-align: center;
    height: 30px;
    padding: 5px 0;
    // font-size:14px;
  }
}
/deep/ .el-table td {
  padding: 5px 0;
}
/deep/ .el-table tr {
  &:nth-child(2n) {
    background: #e7f0f9;
  }
}
// 鼠标悬浮
/deep/ .el-table .el-table__body tr:hover>td {
background-color: #E6F4FF;
}
/deep/ .el-table thead tr th {
  background: #f5f7fa;
}

/deep/.el-table .cell {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/deep/ .el-pagination__editor.el-input .el-input__inner{
  width:30px;
  height:30px;
  border-radius: 50%;
}
</style>
